<!-- 账号密码登录 accountLogin  -->
<template>
    <!-- <tui-drawer mode="bottom" :visible="showLoginModal" @close="closeDrawer"> -->
    <view class="d-container">
        <view class="login-wrapper">
            <!-- 顶部装饰区域 -->
            <view class="header-section">
                <view class="logo-area">
                    <view class="logo-circle"></view>
                </view>
                <view class="welcome-text">
                    <text class="welcome-title">欢迎登录</text>
                    <text class="welcome-desc">使用手机号快速登录</text>
                </view>
            </view>

            <!-- 主要内容区域 -->
            <view class="content-section">
                <!-- 快捷登录按钮 -->
                <view class="login-button-wrapper">
                    <button class="wechat-btn" @getphonenumber="handleGetPhoneNumber" open-type="getPhoneNumber">
                        <view class="btn-content">
                            <view class="btn-icon-wrapper">
                                <text class="btn-icon">📱</text>
                            </view>
                            <text class="btn-text">手机号快捷登录</text>
                        </view>
                        <view class="btn-shine"></view>
                    </button>
                </view>

                <!-- 分隔线 -->
                <view class="divider-wrapper">
                    <view class="divider-line"></view>
                    <text class="divider-text">或</text>
                    <view class="divider-line"></view>
                </view>

                <!-- 提示文字 -->
                <view class="tip-section">
                    <text class="tip-text">还没有账号？</text>
                    <button 
                        type="default" 
                        open-type="getPhoneNumber"
                        plain 
                        class="quick-login-link"
                        @getphonenumber="handleGetPhoneNumber">
                        快捷登录
                    </button>
                </view>

                <!-- 用户协议与隐私协议 -->
                <view class="agreement-wrapper">
                    <view class="agreement-border">
                        <checkbox-group @change="onAgreeTermsChange">
                            <label class="agreement-label">
                                <view class="checkbox-wrapper">
                                    <checkbox value="agree" :checked="agreeTerms" class="agreement-checkbox" />
                                </view>
                                <text class="agreement-text">我已阅读并同意</text>
                                <text class="agreement-link" @click="openUserAgreement">《用户协议》</text>
                                <text class="agreement-text">和</text>
                                <text class="agreement-link" @click="openPrivacyPolicy">《隐私协议》</text>
                            </label>
                        </checkbox-group>
                    </view>
                </view>
            </view>
        </view>
    </view>
    <!-- </tui-drawer> -->
</template>

<script>
import cfg from '@/common/config.js'
    export default {
        data() {
            return {
                // showLoginModal: true,
                agreeTerms: false, // 用户协议同意状态
            }
        },
        methods: {
            closeDrawer(e) {
                this.showLoginModal = false
            },
            //调用此方法显示抽屉
            openDrawer() {
                this.showLoginModal = true
            },
            // 当 checkbox 状态改变时调用
            onAgreeTermsChange(event) {
                // event.detail.value 是一个包含所有被选中的 checkbox 的 value 数组
                this.agreeTerms = event.detail.value.includes('agree');
            },
            // 打开用户协议
            openUserAgreement() {
                uni.navigateTo({
                    url: "/pages/userAgreement/userAgreement"
                });
            },
            // 打开隐私协议
            openPrivacyPolicy() {
                uni.navigateTo({
                    url: "/pages/privacyPolicy/privacyPolicy"
                });
            },
            // 微信授权登录，获取用户信息
            handleGetPhoneNumber(e) {
                var t = this
                if (e.detail.errMsg === "getPhoneNumber:ok" && this.agreeTerms) {
                    let phoneCode = e.detail.code;
                    console.log(e);

                    // 获取登录凭证
                    uni.login({
                        success: (res) => {
                            if (res.code) {
                                this.loginCode = res.code;
                                // if (t.f.isnull(t.f.storage('openid')) == '') {
                                //     uni.request({
                                //         url: `https://api.weixin.qq.com/sns/jscode2session?appid=wx7cf40870e37cf8cc&secret=61dab37764d86bada6485c0962bf397e&js_code=${res.code}&grant_type=authorization_code`,
                                //         method: 'GET',
                                //         success: function (response) {
                                //             // 获取微信返回的数据，包含 openid 和 session_key
                                //             if (response.data.openid) {
                                //                 t.f.storage('openid',response.data.openid)
                                //                 console.log('获取到的 openid:',response.data.openid);
                                //             } else {
                                //                 console.log('获取 openid 失败',response.data);
                                //             }
                                //         },
                                //         fail: function (err) {
                                //             console.log('请求微信接口失败',err);
                                //         }
                                //     });
                                // }

                                t.$api.req(`/member/auth/weixin-mini-app-login`,{
                                    // type: '34',
                                    // code: this.loginCode,
                                    phoneCode: phoneCode,
                                    loginCode: this.loginCode,
                                    state: 'default' // 根据需求设置 state 值
                                },'post',"JSON",false).then(res => {
                                    console.log(res);
                                    const userData = res.data; // 提取data部分
                                    t.f.storage('userToken',userData.accessToken)


                                    if (res.data) {
                                        t.$api.req(`/station/member/get`,{

                                        },'GET',"JSON",false).then(res1 => {
                                            t.f.storage('user_data',res1.data)
                                            setTimeout(() => {
                                                uni.switchTab({
                                                    url: '/pages/index/index' // 跳转到对应路径的 tabBar 页面
                                                });
                                                // t.f.nav('back')
                                            },300);
                                        });
                                    }
                                });
                            }
                        }
                    });
                } else if (!this.agreeTerms) {
                    uni.showToast({
                        title: "请先同意用户协议和隐私协议",
                        icon: "none",
                    });
                } else {
                    console.error('获取手机号失败或用户拒绝授权');
                }
            },

            // 获取用户的手机号码
            getPhoneNumber(e) {
                if (e.detail.errMsg === "getPhoneNumber:ok") {
                    // 获取 phoneCode，用于服务器解密
                    let phoneCode = e.detail.code; // 通过 getPhoneNumber 获取的手机号码 code

                    // 将 phoneCode 发送到后端
                    uni.request({
                        url: cfg.url + '/member/auth/weixin-mini-app-login',
                        method: 'POST',
                        data: {
                            phoneCode: phoneCode,
                            loginCode: this.loginCode, // 之前通过 wx.login 获取的 loginCode
                            state: 'any_custom_state_value' // 根据需求设置您的 state 值
                        },
                        success: (res) => {
                            if (res.data && res.data.phoneNumber) {
                                console.log('用户手机号:',res.data.phoneNumber);
                                // 后续的逻辑，比如保存手机号或进行绑定
                            }
                        },
                        fail: (err) => {
                            console.error('请求失败',err);
                        },
                    });
                } else {
                    console.error('用户拒绝授权获取手机号');
                }
            },
            oneClickLogin() {
                uni.navigateTo({
                    url: '/subPackage1/userInfoSelection/userInfoSelection' // 路径根据实际页面位置调整
                });
            },
            checkLoginStatus() {
                const userToken = uni.getStorageSync('userToken');
                if (!userToken) {
                    this.showLoginModal = true; // 未登录显示弹窗
                }
            },
            closeLoginModal() {
                this.showLoginModal = false;
            },
            handleViewMoreClick() {
                const userToken = uni.getStorageSync('userToken');
                // this.navigateToMarriageList();
                if (userToken) {
                    // 用户已登录，跳转到助婚列表页面
                    this.navigateToMarriageList();
                } else {
                    // 用户未登录，显示登录弹窗
                    this.showLoginModal = true;
                }
            },
            phoneLogin() {
                uni.navigateTo({
                    url: '/subPackage1/phoneLogin/phoneLogin' // 路径根据实际页面位置调整
                });
            },
            navigateToMarriageList() {
                uni.navigateTo({
                    url: '/subPackage1/marriageList/marriageList' // 路径根据实际页面位置调整
                });
            },
        }
    }
</script>

<style scoped>
    .d-container {
        width: 100vw;
        min-height: 100vh;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
        background-size: 200% 200%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 40rpx 30rpx;
        box-sizing: border-box;
        position: relative;
    }

    .d-container::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: radial-gradient(circle at 20% 50%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
                    radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
        pointer-events: none;
    }

    .login-wrapper {
        width: 100%;
        max-width: 600rpx;
        background: #ffffff;
        border-radius: 40rpx;
        box-shadow: 0 30rpx 80rpx rgba(0, 0, 0, 0.2),
                    0 0 0 1rpx rgba(255, 255, 255, 0.3) inset;
        overflow: hidden;
        padding: 70rpx 50rpx 60rpx;
        box-sizing: border-box;
        position: relative;
        backdrop-filter: blur(10rpx);
    }

    .login-wrapper::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4rpx;
        background: linear-gradient(90deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
    }

    /* 顶部区域 */
    .header-section {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 80rpx;
        position: relative;
    }

    .logo-area {
        width: 160rpx;
        height: 160rpx;
        margin-bottom: 50rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
    }

    .logo-circle {
        width: 160rpx;
        height: 160rpx;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
        border-radius: 50%;
        box-shadow: 0 15rpx 40rpx rgba(102, 126, 234, 0.4),
                    0 0 0 4rpx rgba(255, 255, 255, 0.2) inset,
                    0 0 0 8rpx rgba(102, 126, 234, 0.1);
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        overflow: hidden;
    }

    .logo-circle::before {
        content: '';
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.3), transparent);
        transform: rotate(45deg);
        animation: shine 3s infinite;
    }

    .logo-circle::after {
        content: '👤';
        font-size: 80rpx;
        position: absolute;
        z-index: 1;
    }

    @keyframes shine {
        0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
        100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
    }

    .welcome-text {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        position: relative;
    }

    .welcome-title {
        font-size: 52rpx;
        font-weight: 700;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        margin-bottom: 20rpx;
        letter-spacing: 3rpx;
        position: relative;
    }

    .welcome-title::after {
        content: '';
        position: absolute;
        bottom: -8rpx;
        left: 50%;
        transform: translateX(-50%);
        width: 60rpx;
        height: 4rpx;
        background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
        border-radius: 2rpx;
    }

    .welcome-desc {
        font-size: 28rpx;
        color: #999999;
        font-weight: 400;
        letter-spacing: 1rpx;
    }

    /* 内容区域 */
    .content-section {
        width: 100%;
    }

    /* 登录按钮区域 */
    .login-button-wrapper {
        width: 100%;
        margin-bottom: 50rpx;
    }

    .wechat-btn {
        width: 100%;
        height: 100rpx;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
        border: none;
        border-radius: 50rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 12rpx 32rpx rgba(102, 126, 234, 0.5),
                    0 0 0 2rpx rgba(255, 255, 255, 0.2) inset;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
        overflow: hidden;
    }

    .wechat-btn::after {
        border: none;
    }

    .wechat-btn:active {
        transform: scale(0.97) translateY(2rpx);
        box-shadow: 0 6rpx 16rpx rgba(102, 126, 234, 0.4),
                    0 0 0 2rpx rgba(255, 255, 255, 0.3) inset;
    }

    .btn-content {
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        z-index: 2;
    }

    .btn-icon-wrapper {
        width: 56rpx;
        height: 56rpx;
        background: rgba(255, 255, 255, 0.25);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 20rpx;
        backdrop-filter: blur(10rpx);
        border: 2rpx solid rgba(255, 255, 255, 0.3);
    }

    .btn-icon {
        font-size: 36rpx;
    }

    .btn-text {
        font-size: 34rpx;
        font-weight: 600;
        color: #ffffff;
        letter-spacing: 3rpx;
        text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
    }

    .btn-shine {
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
        transition: left 0.5s ease;
    }

    .wechat-btn:active .btn-shine {
        left: 100%;
    }

    /* 分隔线 */
    .divider-wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 50rpx 0 40rpx;
        position: relative;
    }

    .divider-line {
        flex: 1;
        height: 1rpx;
        background: linear-gradient(90deg, transparent, #e0e0e0 50%, transparent);
        position: relative;
    }

    .divider-line::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 1rpx;
        background: linear-gradient(90deg, transparent, #d0d0d0, transparent);
    }

    .divider-text {
        margin: 0 30rpx;
        font-size: 24rpx;
        color: #cccccc;
        background: #ffffff;
        padding: 0 20rpx;
        position: relative;
        z-index: 1;
    }

    /* 提示区域 */
    .tip-section {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 50rpx;
        flex-wrap: wrap;
        padding: 30rpx 0;
        background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
        border-radius: 20rpx;
        border: 1rpx solid rgba(102, 126, 234, 0.1);
    }

    .tip-text {
        font-size: 28rpx;
        color: #999999;
        margin-right: 12rpx;
    }

    .quick-login-link {
        display: inline;
        border: none;
        background: transparent;
        padding: 8rpx 16rpx;
        margin: 0;
        font-size: 28rpx;
        color: #667eea;
        font-weight: 600;
        text-decoration: none;
        position: relative;
        border-radius: 8rpx;
        transition: all 0.3s ease;
    }

    .quick-login-link::after {
        border: none;
    }

    .quick-login-link::before {
        content: '';
        position: absolute;
        bottom: 4rpx;
        left: 16rpx;
        right: 16rpx;
        height: 3rpx;
        background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
        border-radius: 2rpx;
        transform: scaleX(0);
        transition: transform 0.3s ease;
    }

    .quick-login-link:active {
        background: rgba(102, 126, 234, 0.1);
    }

    .quick-login-link:active::before {
        transform: scaleX(1);
    }

    /* 协议区域 */
    .agreement-wrapper {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 40rpx;
    }

    .agreement-border {
        width: 100%;
        padding: 30rpx 20rpx;
        background: linear-gradient(135deg, rgba(102, 126, 234, 0.03) 0%, rgba(118, 75, 162, 0.03) 100%);
        border-radius: 16rpx;
        border: 1rpx solid rgba(102, 126, 234, 0.15);
        box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.03) inset;
    }

    .agreement-label {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        font-size: 24rpx;
        line-height: 1.8;
    }

    .checkbox-wrapper {
        display: inline-flex;
        align-items: center;
        margin-right: 12rpx;
    }

    .agreement-checkbox {
        transform: scale(1.2);
        border-radius: 4rpx;
    }

    .agreement-text {
        color: #666666;
        font-size: 24rpx;
        margin: 0 6rpx;
    }

    .agreement-link {
        color: #667eea;
        font-size: 24rpx;
        font-weight: 600;
        margin: 0 6rpx;
        text-decoration: none;
        position: relative;
        padding: 2rpx 4rpx;
        border-radius: 4rpx;
        transition: all 0.3s ease;
    }

    .agreement-link::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 4rpx;
        right: 4rpx;
        height: 2rpx;
        background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
        border-radius: 1rpx;
        opacity: 0.6;
    }

    .agreement-link:active {
        background: rgba(102, 126, 234, 0.1);
        opacity: 0.8;
    }

    /* 响应式调整 */
    @media screen and (max-width: 750rpx) {
        .login-wrapper {
            padding: 60rpx 40rpx 50rpx;
            border-radius: 36rpx;
        }

        .welcome-title {
            font-size: 46rpx;
        }

        .welcome-desc {
            font-size: 26rpx;
        }

        .logo-circle {
            width: 140rpx;
            height: 140rpx;
        }

        .logo-circle::after {
            font-size: 70rpx;
        }
    }
</style>